<template>
    <div class="person">
        <h1>一辆{{car.brand }}车,价值{{car.price}}万</h1>
        <button @click="changeBrand">修改品牌</button>
        <button @click="changePrice">修改价格</button>
        <button @click="changeCar">修改汽车</button>
    <hr>
    <h1>当前求和为{{ sum }}</h1>
     <button @click="changeSum">点我sum+1</button>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref,reactive} from 'vue';
          //数据
          let car=reactive({brand:'奔驰',price:100})
            let sum=ref(0)
          console.log(car)
          function changePrice(){
            car.price+=10
            console.log(car.price)
          }
           function changeBrand(){
            car.brand="宝马"
            console.log(car.brand)
          }
          function changeCar(){
            // car={brand:"mini",price:20}
            Object.assign(car,{brand:"mini",price:20})
          }
          function changeSum(){
            sum.value+=1
            console.log(sum.value)
          }
</script>

<style>
    .person{
        background-color:skyblue;
        box-shadow:0 0 10px;
        border-radius:10px;
        padding:20px;
    }
    button{
        margin:0 5px;
    }
</style>